<template>
  <!-- 封面概述 -->
  <template v-for="(item, index) in props.rankingDetailData.data" :key="index">
    <div class="cover-detail-page" v-if="item.tracks.length > 0">
      <div class="cover-detail-component" @click="skipDetailSongList(item.id)">
        <img :src="item.coverImgUrl" />
        <!-- 播放图标 更新时间 -->
        <div class="cover-tips">
          <svg class="icon play-icon" aria-hidden="true">
            <use xlink:href="#icon-bofang-copy"></use>
          </svg>
          <span v-show="props.coverDetail.isShowTimes">{{
            formatDate(new Date(item.updateTime), "MM月dd日更新")
          }}</span>
        </div>
      </div>

      <!-- 概述歌曲列表 -->
      <div v-if="index <= 4">
        <sings-list-vue :searchData="spliceRanKingData(index)"></sings-list-vue>
        <span class="show-all" @click="skipDetailSongList(item.id)"
          >查看全部
          <van-icon name="arrow" />
        </span>
      </div>
    </div>
  </template>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { formatDate } from "../../hook/formatTime";
import axios from "axios";
import singsListVue from "../singsList/singsList.vue";
import "../../assets/fonts/play-video/iconfont";

const router = useRouter();
const store = useStore();

// 父组件传入的值
const props = defineProps({
  rankingDetailData: Object || Array,
  coverDetail: {
    isShowTimes: Boolean,
  },
});

// 分割数据
const spliceRanKingData = (index) => {
  let arr = [0, 5, 10, 15];
  let oldData = props.rankingDetailData;
  let newData = {
    result: {
      songs: [],
    },
  };
  // 0 5 10 15
  for (let i = 0; i < 5; i++) {
    newData.result.songs.push(oldData.result.songs[arr[index] + i]);
  }
  return newData;
};

// 点击跳转
const skipDetailSongList = (id) => {
  store.commit("m_song/updateSongListId", id);
  router.push({
    name: "singList",
  });
};
</script>
<style lang='less'>
@import url(../../assets/fonts/play-video/iconfont.css);

.cover-detail-page:nth-child(1){
  margin-top: 20px;
}

.cover-detail-page {
  display: flex;
  justify-content: space-between;

  .sing-list-container {
    width: 900px;
    margin-bottom: 0;
    font-size: 12px;

    .list-container {
      .container-box:nth-child(1) {
        .list-sing-on {
          span:nth-child(1) {
            color: red;
          }
        }
      }
      .container-box:nth-child(2) {
        .list-sing-on {
          span:nth-child(1) {
            color: #ef0000;
          }
        }
      }
      .container-box:nth-child(3) {
        .list-sing-on {
          span:nth-child(1) {
            color: #e30c0c;
          }
        }
      }

      .muisc-operation {
        width: 22px !important;
        margin: 0 !important;
        i {
          position: absolute;
          font-size: 0;
        }
        &::before {
          content: "-";
        }
      }

      .container-box {
        position: relative;
        align-items: center;

        .list-sing-on {
          align-items: center;
        }

        .list-sing-name {
          .music-additional {
            display: none;
          }
        }
        .list-sing-user-name {
          position: absolute;
          right: 10px;
        }

        .list-sing-time,
        .list-sing-pop,
        .list-album-name {
          display: none;
        }

        div {
          flex: none;
        }
      }
    }
    .list-title {
      display: none;
    }
  }

  .show-all {
    display: block;
    width: 80px;
    margin: 8px;
    margin-bottom: 20px;

    &:hover {
      cursor: pointer;
      color: black;
    }
  }
  .cover-detail-component {
    position: relative;
    width: 170px;
    height: 170px;
    &:hover {
      cursor: pointer;
    }

    img {
      width: 100%;
      height: 100%;
      border-radius: 6px;
    }

    .cover-tips {
      position: absolute;
      top: 0;
      z-index: 95;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .play-icon {
        visibility: hidden;
        width: 40px;
        height: 40px;
        opacity: 0.7;
      }

      span {
        color: white;
        margin-top: 12px;
      }
    }

    &:hover {
      .cover-tips {
        .play-icon {
          visibility: visible;
        }
      }
    }
  }
}
</style>